﻿@using TheoryOn.Mvc.Models;
@{
    ViewBag.Title = "Antecedents & Consequences Demo Page";
     
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                <a href="@Url.Action("Index1")">Antecedents & Consequences</a>
                <a href="@Url.Action("Network")">Network</a>
            </p>
        </div>
    </section>
}


  <style type="text/css">
    body, select {
      font: 10pt sans;
    }
    #mynetwork {
      position:relative;
      width: 800px;
      height: 600px;
      border: 1px solid lightgray;
    }
    table.legend_table {
      font-size: 11px;
      border-width:1px;
      border-color:#d3d3d3;
      border-style:solid;
    }
    table.legend_table,td {
      border-width:1px;
      border-color:#d3d3d3;
      border-style:solid;
      padding: 2px;
    }
    div.table_content {
      width:80px;
      text-align:center;
    }
    div.table_description {
      width:100px;
    }
      #node-label,#node-id {
        width:200px;
      }
    #operation {
      font-size:28px;
    }
    #network-popUp {
      display:none;
      position:absolute;
      top:350px;
      left:470px;
      z-index:299;
      width:250px;
      height:160px;
      background-color: #f9f9f9;
      border-style:solid;
      border-width:3px;
      border-color: #5394ed;
      padding:10px;
      text-align: center;
    }
      .mask {
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        z-index:100;
        background-color:gray;
      }
  </style>

<p>
  There are a lot of options with arrows! They can also be combined with dashed lines.
</p>

<div id="mynetwork"></div> 
 

@section scripts{
<script type="text/javascript">
    $(function () {
        // create an array with nodes
        var shape = "ellipse";
        var nodes = new vis.DataSet([
          { id: 1, label: 'Node 1',shape:shape, group: "antecedents", fixed: true, x: 10, y: 10 },
          { id: 2, label: 'Node 2',shape:shape, group: "antecedents", fixed: true, x: 10, y: 60 },
          { id: 3, label: 'Node 3',shape:shape, group: "antecedents", fixed: true, x: 10, y: 110 },
          { id: 4, label: 'Node 4',shape:shape, group: "antecedents", fixed: true, x: 10, y: 160 },
          
          { id: 5, label: 'Node 5', shape: shape, size:300, group: "query", fixed: true, x: 200, y: 85 },

          { id: 6, label: 'Node 6',shape:shape, group: "consequences", fixed: true, x: 410, y: 10 },
          { id: 7, label: 'Node 7',shape:shape, group: "consequences", fixed: true, x: 410, y: 60 },
          { id: 8, label: 'Node 8',shape:shape, group: "consequences", fixed: true, x: 410, y: 110 }
        ]);

        // create an array with edges
        var edges = new vis.DataSet([ 
          { from: 1, to: 5, arrows: 'to' },
          { from: 2, to: 5, arrows: 'to' },
          { from: 3, to: 5, arrows: 'to' },
          { from: 4, to: 5, arrows: 'to' },

          //{ from: 2, to: 5, arrows: 'to, middle, from' },
          { from: 5, to: 6, arrows: 'to' },
          { from: 5, to: 7, arrows: 'to' },
          { from: 5, to: 8, arrows: 'to' }
        ]);

        // create a network
        var container = document.getElementById('mynetwork');
        var seed = 2;
        var data = {
            nodes: nodes,
            edges: edges,
            event: event
        };
        var options = {
            layout: { randomSeed: seed }, // just to make sure the layout is the same when refresh            
        };

        var network = new vis.Network(container, data, options);

    });
</script>
}
